<!DOCTYPE html>
<html>

<head>
  <title>滑块示例</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <style>
    #slider {
      width: 200px;
      margin: 20px;
      background-color: brown;
    }
  </style>
</head>

<body>
  <div id="slider"></div>
  <span id="currentValue">0</span>

  <script>
    $(document).ready(function () {
      $("#slider").slider({
        min: 0,
        max: 100,
        value: 0,
        slide: function (event, ui) {
          $("#currentValue").text(ui.value)
          let sliderId = event.target.id
          let sliderValue = ui.value
          let dataValue = event.target.getAttribute('data-value')
          console.log('滑动的滑块 ID：', sliderId)
          console.log('滑块的当前值：', sliderValue)
          console.log('滑块的 data-value 属性值：', dataValue)
        }
      })
    });
  </script>
</body>

</html>